<template>
    <view class="content page" :style="{ '--color': color }">
        <status-bar title="优惠券"></status-bar>
        <backTop v-if="toTop"></backTop>
        <view class="nav_top_box" :style="{ top: navHeight + System.statusBarHeight + 'px' }">
            <view class="navlists" :class="navTab == 1 ? 'navAction thmeColor' : ''" @click="navclick(1, 0)"><text>可用</text></view>
            <view class="navlists" :class="navTab == 2 ? 'navAction thmeColor' : ''" @click="navclick(2, 1)"><text>已使用</text></view>
            <view class="navlists" :class="navTab == 3 ? 'navAction thmeColor' : ''" @click="navclick(3, 2)"><text>已过期</text></view>
            <view class="Advertising_article thmeBg" :style="{ '--color': color, left: 33.33 * (navTab - 1) + '%' }"></view>
        </view>
        <view class="discount_coupon_list">
            <empty v-if="nothing" type="1" cat="3" msg="你还没有相关优惠券哦 ~"></empty>

            <view class="itemList_box" v-for="(item, index) in pageData" :key="index">
                <view class="Gift" v-if="item.share_info && item.share_info.state == 1" @click.stop="butinShare(item)">
                    赠送好友
                    <button open-type="share" class="shareBtn"></button>
                </view>
                <view class="couponListBg" :style="{ background: parseInt(item.state) == 1 ? item.color : 'rgba(153,153,153,0.5)' }"></view>
                <view class="right_top statre1" :style="{ 'border-top-color': parseInt(item.state) == 1 ? item.color : 'rgba(153,153,153,0.5)' }">
                    <text>{{ item.couName }}</text>
                </view>

                <view class="flex-box align-center p-top20 p-bot20">
                    <view class="cont_money flex-box d-flex a-center j-centert">
                        <view class="flex">
                            <view class="moneylimit" :style="{ color: parseInt(item.state) == 1 ? item.color : 'rgba(153,153,153,0.5)' }">
                                {{ item.unit }}
                                <text v-if="item.price.toString().length > 3" style="font-size: 48rpx">{{ item.price }}</text>
                                <text v-else style="font-size: 66rpx">{{ item.price }}</text>
                                {{ item.type != 1 ? item.priElse : '' }}
                            </view>
                            <view class="cont_right">
                                <view class="discount_coupon_btn" v-if="item.state == 0" style="background: #999999">已关闭</view>
                                <!-- <view class="discount_coupon_btn" v-if="item.state == 1 && item.restrict != 4" :style="{'background': item.color?item.color:''}" @click="backHome">去使用</view> -->
                                <view class="discount_coupon_btn" v-if="item.state == 1 && item.restrict == 4" :style="{ background: item.color ? item.color : '' }" @click="showCode(index)">
                                    核销码
                                </view>
                                <view class="discount_coupon_btn" v-if="item.state == 2" style="background: #999999">已使用</view>
                                <view class="discount_coupon_btn" v-if="item.state == 3" style="background: #999999">已过期</view>
                                <view class="discount_coupon_btn" v-if="item.state == 4" style="background: #999999">未开始</view>
                            </view>
                        </view>
                    </view>
                    <view class="cont_describe">
                        <view class="discount_coupon_title lines" :style="{ color: parseInt(item.state) == 1 ? item.color : 'rgba(153,153,153,0.5)', 'width:': '100%' }">
                            {{ item.title }}
                        </view>
                        <view class="discount_coupon_info flex-box align-center" :style="{ color: parseInt(item.state) == 1 ? item.color : 'rgba(153,153,153,0.5)' }">
                            <text class="lines">{{ item.company }}</text>
                        </view>
                        <view class="d-flex a-center j-sb">
                            <view class="discount_coupon_time" :style="{ color: parseInt(item.state) == 1 ? item.color : 'rgba(153,153,153,0.5)' }">
                                {{ item.expiryDate }}
                            </view>
                            <view
                                class="m-right30 zIndex"
                                v-if="item.state == 1 && ['5', '6', '7', '99'].includes(item.type)"
                                :style="{ color: item.color ? item.color : '' }"
                                @click="useCoupon(item)"
                            >
                                立即使用
                            </view>
                        </view>
                    </view>
                </view>

                <view class="mid-line flex-box align-center">
                    <view class="circle circle1"></view>
                    <view class="line flex"></view>
                    <view class="circle circle2"></view>
                </view>

                <view class="discount_coupon_intro flex-box" @click="currIndex = currIndex == index ? -1 : index" :class="{ active: currIndex == index }">
                    <view class="txt flex" :class="{ lines: currIndex != index }">{{ item.info }}</view>
                    <text class="icon-xiangxia iconfont"></text>
                </view>

                <view
                    class="halfCicle"
                    :style="{
                        background: 'url(' + staticUrl + '/images/conpon_half_circle1.png) repeat-x',
                        'background-size': '28rpx 4rpx'
                    }"
                ></view>
            </view>
        </view>
        <view class="DiLine" v-if="bottomtip">------ 我是有底线的 ------</view>

        <!--  线下核销 显示二维码 -->
        <view class="masking d-flex j-centert a-center" v-if="qrCode">
            <view class="row f-column a-center">
                <view class="padding100 d-flex f-column a-center bgwhite bor_radius_10">
                    <image :src="$imgUrls(qrCodeImg)" class="qrCodeImg"></image>
                    <view class="row j-centert h5 color_33 bold">{{ qrCodeNumber }}</view>
                </view>
                <view class="iconfont icon-guanbi white size60 padding30" @click="closureQr"></view>
            </view>
        </view>

        <take-delivery :pageData="couData" :Address="Address" :shop_id="shop_id" :btnTxt="order_id ? '查看订单' : '生成订单'" @close="closeUse" @confirm="createOrder" v-if="couData"></take-delivery>
    </view>
</template>
<script>
    var that;
    import { mapState } from 'vuex';
    import takeDelivery from '@/components/takeDelivery.vue';
    export default {
        components: {
            takeDelivery
        },
        data() {
            return {
                navTab: 1,

                pageData: [],
                nothing: false,
                page: 1,
                bottomtip: false,
                toTop: false,
                staticUrl: this.staticUrl,

                currIndex: -1,
                more: false,

                qrCode: false,
                qrCodeImg: '',
                qrCodeNumber: '',

                Address: '',
                couData: '',
                shop_id: '',
                order_id: '',
                share_info: ''
            };
        },
        onShow() {
            this.getAddress();
        },

        onLoad(e) {
            that = this;

            if (e.shop_id) that.shop_id = e.shop_id;
            that.getPageData();
        },
        computed: {
            ...mapState(['tabTitle', 'color', 'city', 'navHeight', 'System', 'share', 'share_v_id', 'vid', 'bid'])
        },

        methods: {
            butinShare(item) {
                this.share_info = item.share_info;
                console.log(item, 'item');
            },
            showCode(index) {
                let qrData = that.pageData[index];
                that.qrCodeImg = qrData.qrCodeImg;
                that.qrCodeNumber = qrData.sn_code;
                that.qrCode = true;
            },
            closureQr() {
                //  关闭 二维码 ，从新获取一次数据，检查是否被核销
                that.$http
                    .post({
                        url: '/SRA_simMallApi/myCouponsList',
                        data: {
                            vId: that.vid,
                            status: that.navTab, // 0 可用 1 未开始 2已使用 3 已过期
                            pageIndex: that.page,
                            pageSize: 10,
                            bid: that.bid
                        }
                    })
                    .then((res) => {
                        if (res.data) {
                            that.pageData = res.data;
                        }
                    });
                that.qrCode = false;
            },
            navclick(i, positions) {
                that.navTab = i;
                that.dataInit();
            },
            getPageData() {
                that.nothing = false;
                that.more = false;
                that.bottomtip = false;
                that.$http
                    .post({
                        url: '/SRA_simMallApi/myCouponsList',
                        data: {
                            vId: that.vid,
                            status: that.navTab, // 0 可用 1 未开始 2已使用 3 已过期
                            pageIndex: that.page,
                            pageSize: 10,
                            bid: that.bid
                        }
                    })
                    .then((res) => {
                        if (res.data) {
                            that.pageData = that.pageData.concat(res.data);
                            if (that.pageData.length > 10 && res.data.length < 10) {
                                that.bottomtip = true;
                            }
                            if (res.data.length > 9) that.more = true;
                        } else {
                            if (that.pageData.length < 1) {
                                that.nothing = true;
                            }
                        }
                        that.$hideLoading();
                    });
            },
            getAddress() {
                this.$http
                    .get({
                        url: '/SRA_simMallApi/getOldAddress',
                        data: {
                            type: 3
                        }
                    })
                    .then((res) => {
                        if (res.code == 100 && res.data) {
                            this.Address = res.data;
                        }
                    });
            },
            dataInit() {
                this.currIndex = -1;
                this.page = 1;
                this.pageData = [];
                this.getPageData();
            },
            closeUse() {
                this.$showLoading('列表加载中...');
                this.couData = '';
                this.shop_id = '';
                this.order_id = '';
                this.dataInit();
            },
            operate(item, params = {}) {
                this.$http
                    .post({
                        url: '/publicPlugins/couponsOperation',
                        data: {
                            couponId: item.couponId,
                            sn_code: item.sn_code,
                            share_v_id: this.share_v_id,
                            ...params
                        }
                    })
                    .then((res) => {
                        this.$Toast(res.msg);
                        if (res.order_id) this.order_id = res.order_id;
                        if (res.code == 100 && item.type != 7) this.dataInit();
                    });
            },
            useCoupon(item) {
                // 支持积分券、余额券、兑换券、套券
                if (item.type == 7) {
                    this.couData = item;
                    if (item.stores) this.shop_id = item.stores[0].shop_id;
                    return;
                }
                this.$Modal('提示', '确定要使用吗？').then((res) => {
                    if (!res) return;
                    this.operate(item);
                });
            },
            createOrder() {
                if (this.order_id) return this.toUrl('/orderPage/order/orderDetail?order_id=' + this.order_id);
                let params = {
                    store_id: this.shop_id,
                    delivery: '1',
                    uname: this.Address.Aname,
                    utel: this.Address.Amobile,
                    receivingAddress: this.Address.Aregion + this.Address.Aaddress
                };
                this.operate(this.couData, params);
            }
        },
        onShareAppMessage(res) {
            let shareData = uni.getStorageSync('shareData');

            if (res.from === 'button') {
                console.log(this.share_info, ' this.share_info');
                return {
                    title: this.share_info.title,
                    desc: this.share_info.info,
                    imageUrl: this.share_info.img,
                    path: this.share_info.path
                };
            }
            return {
                title: shareData.title,
                desc: shareData.desc,
                path: '/pages/index/index?share_v_id=' + this.vid + '&pageType=99',
                imageUrl: shareData.imageUrl
            };
        },
        onPageScroll(e) {
            if (e.scrollTop > 100) {
                that.toTop = true;
            } else {
                that.toTop = false;
            }
        },
        onReachBottom() {
            if (that.more) {
                that.$showLoading('列表加载中...');
                that.page = that.page + 1;
                that.getPageData();
            }
        }
    };
</script>

<style scoped lang="scss">
    .qrCodeImg {
        width: 400rpx;
        height: 400rpx;
    }

    .page {
        background-color: #f5f5f5;
    }

    .nav_top_box {
        width: 100%;
        height: 80upx;
        background: #ffffff;
        display: flex;
        line-height: 80upx;
        text-align: center;
        font-size: 28upx;
        color: #333333;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    .navlists {
        width: 33.33%;
    }

    .navAction {
        position: relative;
    }

    .Advertising_article {
        width: 33.33%;
        height: 4upx;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: left 0.2s;
    }

    .discount_coupon_list {
        width: 100%;
        padding: 100upx 20upx 20upx 20upx;
    }

    .itemList_box {
        width: 100%;
        background: #ffffff;
        border-radius: 20upx;
        position: relative;
        margin-bottom: 30rpx;
        overflow: hidden;
        .Gift {
            background: rgb(30, 159, 255);
            color: #fff;
            font-size: 28rpx;
            padding: 6rpx 20rpx;
            border-radius: 10rpx;
            position: absolute;
            right: 20rpx;
            top: 120rpx;
            z-index: 10;
            .shareBtn {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 11;
                background-color: transparent;
                border: none;
            }
            .shareBtn::after {
                border: none;
            }
        }
    }

    .cont_describe {
        width: calc(100% - 200rpx);
        padding-left: 8rpx;
    }

    .cont_right {
        color: #ed702d;
        text-align: center;
        margin-top: 4rpx;
        position: relative;
        z-index: 5;
    }

    .cont_money {
        width: 200rpx;
        border-radius: 20upx;
        text-align: center;
        color: #ed702d;
        align-items: flex-end;
        padding-bottom: 10rpx;
    }

    .moneylimit text {
        margin: 0 6upx;
        font-size: 70upx;
        font-weight: bold;
    }

    .discount_coupon_title {
        font-size: 34rpx;
        font-weight: bold;
        padding-right: 30rpx;
    }

    .discount_coupon_time {
        font-size: 28rpx;
    }

    .discount_coupon_info {
        height: 60rpx;
        padding-right: 30rpx;

        text {
            color: inherit;
            font-size: 28rpx;

            line-height: 30rpx;
            font-weight: 400;
        }
    }

    .expire {
        font-size: 20upx;
    }

    .discount_coupon_btn {
        padding: 0 30rpx;
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 48rpx;
        color: #ffffff;
        display: inline-block;
        position: relative;
    }

    .right_top {
        width: 0;
        height: 0;
        color: #ffffff;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;
        border-top: 80upx solid #ec612a;
        border-left: 80upx solid transparent;
    }

    .right_top text {
        position: absolute;
        transform: rotate(45deg);
    }

    .statre text {
        left: -48upx;
        top: -70upx;
        font-size: 24upx;
    }

    .statre1 text {
        left: -50upx;
        top: -62upx;
        font-size: 16rpx;
    }

    .mid-line {
        .line {
            height: 2rpx;
            border-top: 2rpx dashed rgba(0, 0, 0, 0.1);
        }

        .circle {
            width: 24rpx;
            height: 24rpx;
            background: #f5f5f5;
            top: 50%;
            border-radius: 50%;
            z-index: 5;
        }

        .circle1 {
            margin-left: -12rpx;
        }

        .circle2 {
            margin-right: -12rpx;
        }
    }

    .discount_coupon_intro {
        height: 60rpx;
        position: relative;
        z-index: 5;
        padding: 10rpx 20rpx 0;
        min-height: 60rpx;
        transition: all 0.2s;

        .txt {
            color: #9e9d9d;
            height: 30rpx;
            text-align: justify;
        }

        .icon-xiangxia {
            font-size: 28rpx;
            color: #9e9d9d;
            transition: all 0.2s;
        }

        &.active {
            height: auto;
            align-items: center;
            flex-direction: column;

            .txt {
                height: auto;
                width: 100%;
            }

            .icon-xiangxia {
                transform: rotate(180deg);
                margin: 10rpx;
            }
        }
    }

    .halfCicle {
        height: 4rpx;
        position: relative;
        z-index: 5;
    }

    .couponListBg {
        width: 100%;
        height: 100%;
        opacity: 0.03;
        position: absolute;
        z-index: 1;
    }
</style>
